<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="40%" direction="rtl" v-model="show" :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">商品到样</div>
        </template>
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="88px"
            v-show="!productSampleData.length">
            <el-form-item label="快递单号" prop="trackingNumber">
                <el-input v-model="queryParams.trackingNumber" placeholder="请输入快递单号" clearable style="width: 220px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="productSampleData.length > 0 ? productSampleData : productSampleDatas"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商品名称" align="center" prop="styleName" />
            <el-table-column label="商品主图" align="center" prop="productImage" width="100">
                <template #default="scope">
                    <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                </template>
            </el-table-column>
            <el-table-column label="供应商" align="center" prop="supplierName" />
            <el-table-column label="发货数量" align="center" prop="inventory" />
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="confirmClick">到样确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup name="ProductSample" lang="ts">
import { SupplierAddProductsVO } from '@/api/system/supplierAddProducts/types';
import { listSupplierAddProduct } from '@/api/system/supplierAddProducts';
import { productsBusiness } from '@/api/group/investmentPromotion/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const ids = ref<{ productsId?: string; inventory?: string; }[]>([]);
const queryParams = ref<{ trackingNumber?: string, pageNum: number, pageSize: number, auditStatus: string }>({
    pageNum: 1,
    pageSize: 10,
    trackingNumber: undefined,
    auditStatus: '6'
})
const productSampleDatas = ref<SupplierAddProductsVO[]>([])

const props = defineProps({
    productSampleVisible: {
        type: Boolean,
        default: false
    },
    productSampleData: {
        type: Array,
        default: false
    }
});
const show = computed(() => props.productSampleVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

/**获取数据 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await listSupplierAddProduct(queryParams.value);
        productSampleDatas.value = res.rows;
        total.value = res.total;
        loading.value = false;
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
/** 查询 */
const handleQuery = async () => {
    ids.value = []
    getList();
}
/** 多选框选中数据 */
const handleSelectionChange = (selection: SupplierAddProductsVO[]) => {
    ids.value = selection.map((item) => ({ productsId: item.id, inventory: item.inventory }));
};
/** 到样确认 */
const confirmClick = async () => {
    console.log(ids.value)
    if (ids.value.length > 0) {
        await productsBusiness(ids.value)
        queryFormRef.value?.resetFields();
        proxy?.$modal.msgSuccess('到样确认成功');
        handleClose()

    } else {
        proxy?.$modal.msgError('请勾选到样商品');
    }
}

</script>